<template>
  <div>
<headerView></headerView>

    <div class="login-container">
      <div class="space-6"></div>

      <div class="position-relative">
        <div id="login-box" class="login-box visible widget-box no-border">
          <div class="widget-body">
            <div class="widget-main">
              <h4 class="header blue lighter bigger">
                <i class="ace-icon fa fa-coffee green"></i>
                用户登陆
              </h4>

              <div class="space-6"></div>
                <span class="errorMsg">{{errMsg}}</span>
              <form>
                <fieldset>
                  <label class="block clearfix">
                    <span class="block input-icon input-icon-left">
                      <i class="ace-icon fa fa-user"></i>
                      <input
                        type="text"
                        class="form-control"
                        placeholder="邮箱或手机号码"
                        v-model="tel"
                      />
                    </span>
                  </label>

                  <label class="block clearfix">
                    <span class="block input-icon input-icon-left">
                      <i class="ace-icon fa fa-lock"></i>
                      <input
                        type="password"
                        class="form-control"
                        placeholder="请输入密码"
                       v-model="password"
                      />
                    </span>
                  </label>

                  <div class="space"></div>

                  <div class="clearfix">
                    <label class="inline">
                      <input type="checkbox" class="ace" v-model="checked"/>
                      <span class="lbl"> 记住</span>
                    </label>

                    <button
                      type="button"
                      class="width-35 pull-right btn btn-sm btn-primary"
                    >
                      <i class="ace-icon fa fa-key"></i>
                      <span class="bigger-110" @click="login()">登录</span>
                    </button>
                  </div>

                  <div class="space-4"></div>
                </fieldset>
              </form>

              <div class="social-or-login center">
                <span class="bigger-110">第三方登录</span>
              </div>

              <div class="space-6"></div>

              <div class="social-login center">
                <a href="#">
                  <img src="images/weixin.png" />
                </a>

                <a href="#">
                  <img src="images/qq.png" />
                </a>

                <a href="#">
                  <img src="images/sina.png" />
                </a>
              </div>
            </div>
            <div class="toolbar clearfix">
              <div>
                <a
                  href="#"
                  data-target="#forgot-box"
                  class="forgot-password-link"
                >
                  <i class="ace-icon fa fa-arrow-left"></i>
                  忘记密码
                </a>
              </div>

              <div>
                <router-link to="/reg" data-target="#signup-box"
                  class="user-signup-link">注册
                  <i class="ace-icon fa fa-arrow-right"></i></router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
          <div id="bottom">
            <blowView></blowView>
          </div>  
          </div>
</template>

<script>

export default {
  data () {
    return {
      tel:'',
      password:'',
      errMsg:'',
      token:'',
      // 是否选中记住我
      checked:false
    }
  },
  created(){
    if(localStorage.getItem('saveTel')==null||localStorage.getItem('saveTel')==""){
      // 没有记住的值
      this.tel='',
      this.password=''
    }else{ 
      // 存在记住的值
      this.tel=localStorage.getItem('saveTel')
      this.password=localStorage.getItem('savePassword')
      this.checked=true
    }
  },
  computed:{

  },
  methods:{

        // 登录方法
        login(){
          const _this=this;
          if (this.tel==""){
            this.errMsg="用户名为空"
          }else if (this.password==""){
            this.errMsg="密码为空"
          }else{
            // 判断是否记住我的功能
            if(this.checked){
              this.checked=true
              // 记住我
              localStorage.setItem("saveTel",this.tel)
              localStorage.setItem("savePassword",this.password)
            }else{
              this.checked=false
              localStorage.removeItem('saveTel')
              localStorage.removeItem('savePassword')
            }
            // 发送登录请求
            // this.$axios.get('http://localhost:8080/login?tel='+this.tel+'&password='+this.password).then(response => {
            this.$axios.get('http://localhost:8080/login?tel='+this.tel+'&password='+this.$encryptionValue(this.password)).then(response => {
                if(response.data.code===0){
                    this.errMsg=response.data.msg;
                }else{
                  // 将token存储到localStorage里面
                  // localStorage.setItem("rLogin",response.data.data[1]);
                  localStorage.setItem("rLoginName",response.data.data[0]);
                  // 把token放到cookie里面，设置一天的cookie过期时间
                  this.$setCookie("token",response.data.data[1],1);
                  // 跳转首页
                  this.$router.push("/index").then(()=>{
                    location.reload()
                  });
                }
            });
          }
        }
  }
}

</script>

<style scoped>
    @import url('../../public/css/bootstrap.min.css');
    @import url('../../public/css/font-awesome.min.css');
    @import url('../../public/css/base.css');
    @import url('../../public/css/index2.css');
    @import url('../../public/css/reg.css');
    @import url('../../public/css/headbott.css');
    @import url('../../public/css/ace.min.css');
</style>